<template>
	<view class="good_item" @click="toDetail(leaf)">
		<view class="good_img">
			<image :src="leaf.leaf_img"></image>
		</view>
		<view class="price">
			<text>￥{{leaf.price}}</text>
			<text>{{leaf.views}}浏览</text>
		</view>
		<view class="name">
			<text>{{leaf.leaf_name}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name:"list-item",
		data() {
			return {
				tealist:{

				}
			};
		},
		watch:{
			leaf:{
				handler(newValue,oldValoue){
					console.log(newValue)
					this.leaf=newValue
				},
				deep:true,
				immediate:false
			}
		},
		props:{
			leaf:{
				type:Object,
				default(){
					return {}
				}
			}
		},
		methods:{
			toDetail(item){
				//跳转到详情
				let curPage = getCurrentPages();
				let route = curPage[curPage.length - 1].route; //获取当前页面的路由
				
				console.log("跳转到详情页",route)
				
				uni.navigateTo({
					url:"../detail/detail?pageSource=list-item&data="+encodeURIComponent(JSON.stringify(item)),
				})
			}
		}
	}
</script>

<style lang="scss">
.good_item{
				background: #fdfffe;
				width: 350rpx;
				margin: 6px;
				padding: 15rpx;
				box-sizing: border-box;//不会把盒子撑大
				.good_img{
					width: 100%;
					padding-bottom: 15rpx;
					image{
						width: 100%;
						height: 150px;
						margin:auto;
						display: block;
					}
				}
				image{
					width: 80%;
					height: 150px;
					margin:auto;
					display: block;
				}
				.price{
					color: #F0AD4E;
					padding-bottom: 15rpx;
					font-size: 36rpx;
					display: flex;
					justify-content: space-between;
					text:nth-child(2){
						font-size: 14px;
						color: #8F8F94;
						padding-top: 5px;
						//中划线
						// text-decoration: line-through;
					}
				}
				.name{
					text{
						//文本超出部分...显示
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box ;
						-webkit-line-clamp:1;
						-webkit-box-orient:vertical;
					}
				}
			}
</style>